<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
<title>Instant Sign In Form Responsive Widget Template :: w3layouts</title>
<!-- Meta-Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Instant Sign In Form Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Meta-Tags -->

<!-- Custom Theme files -->
<link href="<%=path%>/web/css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="<%=path%>/web/css/style.css" rel='stylesheet' type='text/css' />

<!-- font-awesome-icons -->
<link href="<%=path%>/web/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome-icons -->

<!--fonts--> 
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<!--//fonts--> 
</head>
<body>
<div class="agileinfo-dot">
<!--background-->
<!-- login -->
<h1>疾控中心</h1>
	<div class="login-section">
	    <div class="login-w3l">
		<h2 class="sub-head-w3-agileits">登录</h2>	
			<div class="login-form">			

				<form  method="post" id="loginForm" action="<%=path%>/services/goLogin">
					<input type="hidden" name="path" value="<%=request.getHeader("referer")%>">
					<div class="input">


						<i class="fa fa-user" aria-hidden="true"></i>
						<input type="text" class="user" name="username" id="username" placeholder="请输入邮箱账号" required="" />
					</div>
					<div class="input">
						<i class="fa fa-unlock-alt" aria-hidden="true"></i>
						<input type="password" class="lock" name="password" id="password" placeholder="请输入密码" required="" />
					</div>
					<div class="signin-rit">
						<span class="checkbox1">
							<label class="checkbox"><input type="checkbox" name="checkbox" checked="">记住我</label>
						</span>
						<a class="forgot" href="<%=path%>/services/ForgetPassword">忘记密码?</a>
						<div class="clear"> </div>
					</div>
					<span style="color: red">
						<c:if test="${requestScope.err eq 0}">用户名或密码错误!</c:if>
					</span>
					<br>
					<input type="submit" value="登录">
				</form>	
				<p><a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog">注册</a></p>
			</div>
			<!-- //login -->
		</div> 
		<div class="profile-agileits bg-color-agile"></div> 
		<div class="clear"></div>
	</div>	
			<p class="footer">© 2017 Instant Sign In Form. All Rights Reserved | Design by <a href="http://w3layouts.com/"> W3layouts</a></p>
			<!--//login-->
			
			
			
			<div class="pop-up"> 
	<div id="small-dialog" class="mfp-hide book-form">
		<h3 class="sub-head-w3-agileits">注册</h3>	
		<div class="login-form">			
			<form id="regForm" action="/services/regist" method="post">
				<div class="input">
					<i class="fa fa-envelope" aria-hidden="true"></i>
					<input type="email" id="email" name="email" class="email" placeholder="请输入邮箱" required=""/>
					<span id="emailMsg"></span>
				</div>
				<div class="input">
					<i class="fa fa-unlock-alt" aria-hidden="true"></i>
					<input type="password" id="regPassword" name="password" class="password" placeholder="请输入密码" required=""/>
					<span id="passwordMsg"></span>
				</div>
				<div class="input">
					<i class="fa fa-unlock-alt" aria-hidden="true"></i>
					<input type="password" id="isPassword" name="isPassword" class="isPassword" placeholder="请再一次输入密码" required=""/>
					<span id="isPasswordMsg"></span>
				</div>
				<div class="input">
					<i class="fa fa-unlock-alt" aria-hidden="true"></i>
					<input type="text" id="emailCode" name="emailCode" placeholder="请输入验证码" required=""/>
                    <span id="emailCodeMsg"></span>
					<a href="javascript:void(0)" id="sendCode"><div style="width: 32%;font-size: 14px;color:#f5f5f5;float: left;line-height: 40px;padding-left: 7px" id="text">获取验证码</div></a>
				</div>
				<input type="submit" value="注册">
			</form>
		</div>
	</div>
</div>	
</div>
<!--js-->
<script type="text/javascript" src="<%=path%>/web/js/jquery-2.1.4.min.js"></script>
<!--//js-->
<!--popup-js-->
<script src="<%=path%>/web/js/jquery.magnific-popup.js" type="text/javascript"></script>
 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
						});
</script>
<!--//popup-js-->
<script>
	$(function() {
		$("#email").blur(checkEmail);
	});
	function checkEmail() {
		var path = "<%=path%>";
		var reg = /^\w+(\.\w+)*@\w+\.\w{2,4}(\.\w+)?$/;
		var email = $("#email").val();
		var flag = reg.test(email);
		if(flag == true)
		{
			var flag1;
			$.get(path+"/services/isEmail",
					{email:email},
					function (data) {
						if(data==0)
						{
							$("#emailMsg").html("√");
							$("#emailMsg").css("color", "green");
							flag1 = true;
						}
						if(data==1)
						{
							$("#emailMsg").html("邮箱重复");
							$("#emailMsg").css("color", "red");
							flag1 = false;
						}
					}
			);
			return flag1;
		} else {
			$("#emailMsg").html("×");
			$("#emailMsg").css("color", "red");
			return false;
		}
	}
	$(function() {
		$("#regPassword").blur(checkPassword);
	});
	function checkPassword() {
		var reg = /^\w{6,16}$/;
		var password = $("#regPassword").val();
		var flag1 = reg.test(password);
		if (flag1 == true)
		{
			$("#passwordMsg").html("√");
			$("#passwordMsg").css("color", "green");
		} else
		{
			$("#passwordMsg").html("×");
			$("#passwordMsg").css("color", "red");
			return false;
		}
	}
	$(function() {
		$("#isPassword").blur(checkIsPassword);
	});
	function checkIsPassword() {
		var m = $("#regPassword").val();
		var ispassword = $("#isPassword").val();
		if (ispassword == m) {
			if (m == 0) {
				$("#isPasswordMsg").html("×");
				$("#isPasswordMsg").css("color", "red");
			} else {
				$("#isPasswordMsg").html("√");
				$("#isPasswordMsg").css("color", "green");
			}
		} else {
			$("#isPasswordMsg").html("×");
			$("#isPasswordMsg").css("color", "red");
			return false;
		}
	}
	$(function() {
		$("#sendCode").blur(sendCode);
	});
	function sendCode() {
		var path = "<%=path%>";
		var email = $("#email").val();
		var reg = /^\w+(\.\w+)*@\w+\.\w{2,4}(\.\w+)?$/;
		if (email == "") {
			$("#emailMsg").html("请输入邮箱");
			$("#emailMsg").css("color", "red");
		} else {
			$.get(path+"/services/sendEmail",
					{email:email},
					function (data) {
						if (data == "0") {
							$("#emailMsg").html("邮箱重复");
							$("#emailMsg").css("color", "red");
							} else {
								$("#text").html("重新获取验证码");
								$("#email").attr("readonly", "readonly");
								$("#email").css("cursor", "not-allowed");
								$("#email").css("background-color", "#FBFBFB");
								}
							}
					);
		}
	}
	$(function() {
		$("#emailCode").blur(checkEmailCode);
	});
	function checkEmailCode() {
        var path = "<%=path%>";
		var emailCode=$("#emailCode").val();
		var flag=false;
		var email=$("#email").val();
		var reg=/^\w+(\.\w+)*@\w+\.\w{2,4}(\.\w+)?$/;
		if(email==""){
			$("#emailMsg").html("请输入邮箱");
			$("#emailMsg").css("color", "red");
			return false;
		}else{
			if (emailCode == "") {
				$("#emailCodeMsg").html("x");
				$("#emailCodeMsg").css("color", "red");
				return false;
			} else {
				$.get(path+"/services/isEmailCode",
						{emailCode:emailCode},
						function (data) {
							if (data == "0") {
								$("#emailCodeMsg").html("√");
								$("#emailCodeMsg").css("color", "green");
								flag = true;
							}
							if (data == "1") {
								$("#emailCodeMsg").html("验证码错误");
								$("#emailCodeMsg").css("color", "red");
								flag = false;
							}
						});
				return flag;
			}
		}
	}
	$(function() {
		$("#regForm").submit(check);
	});
	function check() {
		var flag1 = checkEmail();
		var flag2 = checkIsPassword();
		var flag3 = checkEmailCode();
		return flag1 && flag2 && flag3;
	}
</script>
</body>
</html>